<template>
    <div>
    <el-card>
        <!-- 搜索区域 -->
        <el-row :gutter="5">
            <el-col :span="6">
          <el-input
            placeholder="请输入要查找的设备id"
            v-model="queryInfo.dev_num"
            clearable
            @clear="getDeviceList"
            @keyup.enter.native="getDeviceList"
          >
            <el-button
              slot="append"
              type="primary"
              icon="el-icon-search"
              @click="getDeviceList"
              >搜索</el-button
            >
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-select v-model="queryInfo.selectClass" placeholder="按设备类型筛选" clearable  @clear="deviceSelect"  @keyup.enter.native="deviceSelect">
            <el-option v-for="item in selectClassData" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
          <el-button @click="deviceSelect()" >筛选</el-button>
        </el-col>
        
        </el-row>


        
        <!-- table表格 -->
       <el-table :data="deviceList" border stripe style="margin-top:10px"
       :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
            <el-table-column type="index" :index="indexMethod"></el-table-column><!--  索引页  -->
            <el-table-column label="设备id" prop="devNum"></el-table-column><!--  索引页  -->
            <el-table-column label="设备类型" prop="devType"></el-table-column>
            <el-table-column label="设备名称" prop="devName"></el-table-column>
            <el-table-column label="所属科室" prop="depName"></el-table-column><!--  索引页  -->
            <el-table-column label="所属医院" prop="orgName"></el-table-column><!--  索引页  -->
            <el-table-column label="出厂日期" prop="manufactureDate" width="200px"></el-table-column><!--  索引页  -->
            <el-table-column label="交付日期" prop="deliveryDate" width="200px" ></el-table-column><!--  索引页  -->
            <el-table-column label="创建时间" prop="createTime" width="200px" ></el-table-column>
            <el-table-column label="序列码SN" prop="serialCode"></el-table-column><!--  索引页  -->
            <el-table-column label="备注" prop="note"></el-table-column>
            <el-table-column label="操作" width="175px">
                
            <template slot-scope="scope">
                <!-- 删除 -->
                <el-button type="danger" icon="el-icon-delete"  size="mini" @click="deleteDevice(scope.row.id)"></el-button>
            </template>
            </el-table-column>
        </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pageNum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="queryInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
    </el-card>
    </div>
</template>

<script>
import { getAllDevicesApi, delDevice02Api } from '@/api/device/threeDevice.js'
export default {
    data(){
        return{
            queryInfo:{
               
                dev_num:"",  //查询设备编号信息
                dev_type:"",  //查询设备类型信息
                selectClass:"", //设备类型
                pageNum:1, //当前页数
                pageSize:10,  //每页最大数
            },
            deviceList:[],
            total:0,
            selectClassData:[{name:"成人" ,id:"1"},{name:"儿童" ,id:"2"}] //查询谁被类型的数据内容
        }
    },
    methods:{
        indexMethod(index){
            return (this.queryInfo.pageNum - 1) * this.queryInfo.pageSize + index + 1
        },
        getDeviceList(){
            getAllDevicesApi(this.queryInfo).then(res=>{
              //  this.$message.success(res.message)
                this.deviceList = res.data.devices.records;
                this.total = res.data.devices.total;

            })
        },
        
        handleSizeChange(newSize){
            this.queryInfo.pageSize = newSize;
            this.getDeviceList();
        },
        //pageNum的触发动作
        handleCurrentChange(newPage){
            this.queryInfo.pageNum = newPage;
            this.getDeviceList();
        },
 //筛选设备类型
        deviceSelect(){
          if(this.queryInfo.selectClass)
          {
          let obj={};this.queryInfo.selectClass
           obj=this.selectClassData.find((item)=>item.id === this.queryInfo.selectClass);
           this.queryInfo.dev_type=obj.name
          }else{
            this.queryInfo.dev_type="";
          }
            getAllDevicesApi(this.queryInfo).then(res=>{
              this.deviceList = res.data.devices.records
              this.total = res.data.devices.total
            })
        },
        deleteDevice(id){
            this.$confirm('此操作将永久删除该设备,删除后该设备将无法使用。 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delDevice02Api(id).then(res=>{
                    this.$message.success(res.message);
                    this.getDeviceList();
                })
            }).catch(()=>{
                this.$message.info("已取消删除")
            })
        }
    },
    created(){
        this.getDeviceList();
    }

}
</script>

<style lang="less" scoped>
.el-breadcrumb{
margin-bottom: 15px;
font-size: 17px;
    
}
</style>